<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <p>{{zhang.name}}---{{zhang.age}}</p>
        <p>
            <button @click="zhang.name='李四'">改名</button>
            <button @click="zhang.age++">age++</button>
        </p>
    </div>
</body>
<script>
    // console.log(Vue);  

    // 组合式

    // Vue3中   全局对象(存放各种方法 -> 后期要用)
    let {createApp} = Vue;   
    let {ref,reactive,readonly} = Vue;

    var app = createApp({
       // 采用组合式写法

       setup:function(props){
            // 1. 可以在setup函数中定义数据 方法 计算属性 生命周期钩子函数  
            // 2. 定义 数据 方法 计算属性 通过return值返回   =>  返回的数据和方法,就是代理对象接收的
            // 3. props有一个形参 可以接收父组件传入的数据 (作为子组件时 )

            // 如何定义数据?
            // ref()
            // reactive()
            // readonly()

            // 此写法 可以定义死数据 -> 无法监听到数据改变,同步到视图 
            // let count = 10;  // 10
            // function addCount() {
            //     count++;
            //     console.log(count);
            // }

            // ref()  =>     常用于定义值类型的数据(引入类型也可以)
            // ref() 让我们能创造一种对任意值的 “引用”，并能够在不丢失响应性的前提下传递这些引用。
            // 方法返回一个ref对象, 对象中存在value属性(取值拦截和赋值拦截)存储传入数据,监听到value属性值发生改变,更新视图
            // ref对象 在template和选项式中使用时默认会被解包 ->  a. 取值时 => 自动获取ref对象的value值存储到proxy对象/  也可以在模板中直接使用  b. 赋值时将对象的数据存储到ref对象中

            // reactive() => 常用于定义引用类型的数据
            // 方法返回一个代理对象  -> 所有对代理对象的操作,都会作用域目标对象 
            // reactive() 内部封装过程已经内置了数据监听 对代理对象进行取值和赋值 -> 都会触发取值拦截和赋值拦截 -> 如果是赋值 会同步更新视图 
            // 注意 =>  方法返回一个代理对象,没有办法直接覆盖整个目标对象


           let zhang = reactive({
                name:"张三",
                age:18,
           })

           console.log(zhang);

            // 原理 => 闭包
            return {
                zhang
            }

       },

        // 依旧可以使用选项式写法
        mounted() {
            console.log("this->代理对象",this);
        },
    })

    app.mount("#app");








</script>
</html>